<template>
  <div class="TableComponent">
    <!--input搜索-->
    <div class="table-top flexRBC">
      <div class="flexRSS">
        <div class="flexRSC" style="margin-right: 30px">
          <el-input
            v-model="searchInput"
            size="small"
            placeholder="请输入物品名称"
            class="input-width-200"
            style="margin-right: 10px"
          />
          <el-button
            type="primary"
            round
            size="small"
            style="margin-bottom: 0"
            @click="searchBtn"
          >查 询</el-button>
        </div>
        <div class="flexRSC">
          <el-input
            v-model="categoryName"
            size="small"
            placeholder="请输入物品分类名称"
            class="input-width-200"
            style="margin-right: 10px"
          />
          <el-button
            type="primary"
            round
            size="small"
            style="margin-bottom: 0"
            @click="searchBtn"
          >查 询</el-button>
        </div>
      </div>
      <el-button v-if="!$store.getters.banBtnList.includes('BTN_DEPOSIT_GOODS_ADD')" type="primary" round size="small" @click="addCategory">新增物品</el-button>
    </div>
    <!--table-->
    <div class="list-table">
      <el-table
        v-loading="tableLoading"
        :data="list"
        border
        stripe
        style="width: 100%"
        empty-text="暂无数据"
      >
        <el-table-column prop="name" label="物品名称" min-width="150px" />
        <el-table-column prop="barCode" label="条形码" min-width="150px" />
        <el-table-column prop="remark" label="备注" min-width="150px" />
        <el-table-column label="操作" align="center" width="150px" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="!$store.getters.banBtnList.includes('BTN_DEPOSIT_GOODS_EDIT')"
              size="small"
              type="text"
              @click="editBtn(scope.row)"
            >编辑</el-button>
            <!-- <span class="split-color"> | </span> -->
            <el-button
              v-if="!$store.getters.banBtnList.includes('BTN_DEPOSIT_GOODS_DELETE')"
              type="text"
              size="small"
              @click="listItemDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination-direction
        v-if="paginationConfig.total!==0"
        :config="paginationConfig"
        @sizeschange="sizesChange"
        @pagechange="pageChange"
      />
    </div>
    <InformationDialogInput ref="InformationDialogInput" @emitDialogSave="emitDialogSave" />
  </div>
</template>

<script>
import InformationDialogInput from './InformationDialogInput.vue'
export default {
  components: {
    InformationDialogInput
  },
  data() {
    return {
      searchInput: '', // 搜索输入
      categoryName: '', // 分类搜索
      pageForm: {},
      shopId: 1,
      // 配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 1,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      tableLoading: false, // 表格loading
      searchLoading: false, // 搜索btn loading
      shopName: '',
      // 数据
      list: [], // 表格数据
      filterForm: { // 筛选数据
        name: '',
        serial: ''
      }
    }
  },
  computed: {
    // ...mapGetters(["userInfo"])
  },
  watch: {
    // userInfo(newValue, oldValue) {
    //   console.log(newValue)
    // }
  },
  created() {

  },
  mounted() {
    // this.initData();
  },
  destroyed() {

  },
  methods: {
    /* 数据请求*/
    // 获取门店数据
    initData(page = this.paginationConfig.page, pageSize = this.paginationConfig.pageSize) {
      // 加入page
      this.filterForm.pageNum = page
      this.filterForm.pageSize = pageSize
      this.filterForm.name = this.searchInput
      this.filterForm.categoryName = this.categoryName
      const params = Object.assign({ shopId: this.shopId }, this.filterForm)
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      const data = params
      this.tableLoading = true
      console.log(data)
      this.khReqMethod({ url: '/depositAdmin/config/goods', data, method: 'get', isParams: true }).then(res => {
        this.tableLoading = false
        this.searchLoading = false
        this.list = res.data.list
        this.paginationConfig.total = res.data.total
        this.paginationConfig.page = res.data.pageNum
      })
    },
    /* 按钮点击*/
    addCategory() {
      const parentData = {
        dialogTitle: '新增物品资料',
        shopId: this.shopId
      }
      this.$refs.InformationDialogInput.dialogShow(parentData)
    },
    editBtn(row) {
      const parentData = {
        dialogTitle: '编辑物品资料',
        shopId: this.shopId,
        rowItem: JSON.parse(JSON.stringify(row))
      }
      this.$refs.InformationDialogInput.dialogShow(parentData)
    },
    listItemDelete(row) { // 删除
      this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteGoods(row)
      })
    },
    searchBtn() {
      this.initData()
    },
    /* other*/
    emitDialogSave(pageForm) {
      this.postGoods(pageForm)
      console.log(pageForm)
    },
    // 添加商品
    postGoods(pageForm) {
      const data = Object.assign({ shopId: this.shopId }, pageForm)
      console.log(data)
      this.khReqMethod({ url: '/depositAdmin/config/goods', data, method: 'post', isLoading: true }).then(res => {
        if (res.code === 0) {
          this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
          this.initData()
        }
      })
    },
    // 删除商品
    deleteGoods(row) {
      const data = {
        'id': row.id,
        'shopId': this.shopId
      }
      console.log(data)
      this.khReqMethod({ url: '/depositAdmin/config/goods', data, method: 'delete', isLoading: true, isParams: true }).then(res => {
        if (res.code === 0) {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
          this.initData()
        }
      })
    },
    /* 分页*/
    sizesChange() {

    },
    pageChange() {

    },

    /* 控制显示的隐藏*/
    componentActive(passData) {
      if (passData.shopId) {
        this.shopId = passData.shopId
      }
      if (passData.categoryName) {
        this.categoryName = passData.categoryName
      }
      this.initData()
    }
  }
}
</script>

<style scoped lang="scss">
  .table-top{
    margin-bottom: 10px;
  }
</style>
